<template>
    <ak-page-code>components</ak-page-code>
    <ak-title>AKjs前端框架</ak-title>
    <ak-main>
        <nav class="scrollbarfixed bg_white wp_94 bor_bottom bor_gray_ddd">
            <ol class="line_h_3rem">
                <li class="dis_inbl c_gray_777"><i class="icon-mn_weizhi"></i> 当前位置：</li>
                <li class="dis_inbl c_gray_777">首页 &gt; </li>
                <li class="dis_inbl c_gray_777">组件 &gt; </li>
                <li class="dis_inbl c_theme font_bold">AllChecked</li>
            </ol>
        </nav>
        <div class="module mt_2 ml_1">
            <section class="fl ml_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">使用方法</h3>
                </fieldset>
                <article class="pos_rel ovh h_35_rem bg_white">
                    <div class="plug_tabs_code wm_96">
                        <nav class="ovh press bg_white">
                            <ul class="ovh list_h_3rem nav_line_c length3">
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">HTML</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">插件调用</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">按需引入</li>
                            </ul>
                        </nav>
                        <article class="pos_rel ovh mt_2">
                            <div class="pos_rel ovh bg_white h_24_rem">
                                <section class="pos_rel ovh h_in">
    <!--HTML-->
    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
        <div class="module press">
        <ul class="plug_allchk">
            <li class="bg_white">
                <dl class="pos_rel h_36rem line_h_36rem ovh touchstart bor_bottom_dashed bor_gray_ddd">
                    <dt class="fl ml_3 h_in">
                        <input type="checkbox" name="checkbox2-2" class="plug_Checkbox" multiple value="0202" />
                    </dt>
                    <dd class="fl h_in ml_05rem">全选/反选</dd>
                </dl>
                <ul class="ml_1rem list_h_36rem">
                    <li class="bg_white ovh touchstart bor_bottom bor_gray_ddd">
                        <dl class="pos_rel h_in ovh">
                            <dt class="fl ml_3 h_in">
                                <input type="checkbox" name="checkbox2-2-1" class="plug_Checkbox" multiple value="020201" />
                            </dt>
                            <dd class="fl h_in ml_05rem c_gray_777">笔记本电脑</dd>
                            <dd class="fr mr_3 c_gray_999">￥<span class="c_in">4999.00</span></dd>
                        </dl>
                    </li>
                    <li class="bg_white ovh touchstart bor_bottom bor_gray_ddd">
                        <dl class="pos_rel h_in ovh">
                            <dt class="fl ml_3 h_in">
                                <input type="checkbox" name="checkbox2-2-2" checked="checked" class="plug_Checkbox" multiple value="020202" />
                            </dt>
                            <dd class="fl h_in ml_05rem c_gray_777">台式机电脑</dd>
                            <dd class="fr mr_3 c_gray_999">￥<span class="c_in">3999.00</span></dd>
                        </dl>
                    </li>
                    <li class="bg_white ovh touchstart bor_bottom bor_gray_ddd">
                        <dl class="pos_rel h_in ovh">
                            <dt class="fl ml_3 h_in">
                                <input type="checkbox" name="checkbox2-2-2" class="plug_Checkbox" multiple value="020202" />
                            </dt>
                            <dd class="fl h_in ml_05rem c_gray_777">苹果手机</dd>
                            <dd class="fr mr_3 c_gray_999">￥<span class="c_in">5999.00</span></dd>
                        </dl>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    </textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
    <!--插件调用-->
    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
        $(function () {
            $(".plug_allchk").AKjs_AllChecked({
                toggleClass: 'bg_theme bor_theme c_white icon-ln_zhengque',//改变的样式名，针对例子中的复选框样式美化
                callback :function(array) { //通过回调函数获取数组状态
                    $(array).each(function(){ //对选中的元素可进行控制和获取值
                        console.log($(this).parent("label").parent("dt").parent("dl").children("dd").last().find("span").text()); //获取指定元素的数字
                        console.log($(this)[0].checked);  //获取每个复选框的状态
                        console.log($(this));
                    });
                }
            });
        });
        $(function(){
            //多选按钮样式
            $(".plug_Checkbox").AKjs_Checkbox({
                checkedClass: "icon-ln_zhengque bg_theme bor_theme c_white", //选中后的样式
                disabledClass: "icon-ln_zhengque bg_gray_ccc bor_gray_ccc c_white", //不能选择的样式
                onChange:function(chk){ //回调获取当前的选中状态
                    console.log(chk);
                }
            });
        });
    </textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
    <!--按需引入-->
    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
        AKjs_Plugin("AKjs_AllChecked"); //全选功能
        AKjs_Plugin("AKjs_Checkbox","css"); //复选框美化
    </textarea>
                                </section>
                            </div>
                        </article>
                    </div>
                    <fieldset class="wm_96 mt_2 mb_2">
                        <button type="button" class="plug_submit btn_h_au w_100 bg_theme c_white h_32rem">运行测试</button>
                    </fieldset>
                </article>
            </section>
            <section class="fr mr_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">效果展示</h3>
                </fieldset>
                <article class="pos_rel ova h_35_rem bg_white05">
                    <div class="plug_preview pa_2"></div>
                </article>
            </section>
        </div>
        <div class="module mt_2 ml_1">
            <section class="fl wm_96 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc" data-href="/mobile/sub_test">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">功能插件基本信息</h3>
                </fieldset>
                <article class="pos_rel ovh wp_96 pt_2 pb_2 bg_white">
                    <table class="border bor_gray_ddd">
                        <thead class="c_theme text_al_c list_h_3rem bor_top2 bor_theme">
                        <tr class="bor_bottom bor_gray_ddd line_h_100">
                            <th class="font_bold bor_right bor_gray_ddd">插件名称</th>
                            <th class="font_bold bor_right bor_gray_ddd">说明</th>
                            <th class="font_bold bor_right bor_gray_ddd">依赖的插件名</th>
                            <th class="font_bold bor_right bor_gray_ddd">按需引入方法</th>
                        </tr>
                        </thead>
                        <tbody class="c_gray_777 text_al_c list_h_24rem list_f9f_white bor_top bor_gray_ddd">
                        <tr class="bor_bottom bor_gray_ddd">
                            <td class="bor_right bor_gray_ddd font_bold">AKjs_AllChecked</td>
                            <td class="bor_right bor_gray_ddd">全选功能插件</td>
                            <td class="bor_right bor_gray_ddd">AKjs_Checkbox</td>
                            <td class="bor_right bor_gray_ddd">
                                <p class="text_al_l text_ind_2rem">AKjs_Plugin("AKjs_AllChecked"); //全选功能</p>
                                <p class="text_al_l text_ind_2rem">AKjs_Plugin("AKjs_Checkbox","css"); //复选框美化</p>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </article>
            </section>
        </div>
        <div class="module mt_2 ml_1">
            <section class="fl wm_96 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">功能插件参数说明</h3>
                </fieldset>
                <article class="pos_rel ovh wp_96 pt_2 pb_2 bg_white">
                    <table class="border bor_gray_ddd">
                        <thead class="c_theme text_al_c list_h_3rem bor_top2 bor_theme">
                        <tr class="bor_bottom bor_gray_ddd line_h_100">
                            <th class="font_bold bor_right bor_gray_ddd">参数</th>
                            <th class="font_bold bor_right bor_gray_ddd">说明</th>
                            <th class="font_bold bor_right bor_gray_ddd">类型</th>
                            <th class="font_bold bor_right bor_gray_ddd">可选值</th>
                            <th class="font_bold bor_right bor_gray_ddd">默认值</th>
                        </tr>
                        </thead>
                        <tbody class="c_gray_777 text_al_c list_h_24rem list_f9f_white bor_top bor_gray_ddd">
                            <tr class="bor_bottom bor_gray_ddd">
                                <td class="bor_right bor_gray_ddd">toggleClass</td>
                                <td class="bor_right bor_gray_ddd">改变的样式名，针对例子中的复选框样式美化</td>
                                <td class="bor_right bor_gray_ddd">string</td>
                                <td class="bor_right bor_gray_ddd">custom</td>
                                <td class="bor_right bor_gray_ddd">bg_theme bor_theme c_white icon-ln_zhengque</td>
                            </tr>
                            <tr class="bor_bottom bor_gray_ddd">
                                <th class="bor_right bor_gray_ddd">callback</th>
                                <td class="bor_right bor_gray_ddd">回调入口</td>
                                <td class="bor_right bor_gray_ddd">function</td>
                                <td class="bor_right bor_gray_ddd">array</td>
                                <td class="bor_right bor_gray_ddd">$(array)</td>
                            </tr>
                        </tbody>
                    </table>
                </article>
            </section>
        </div>
    </ak-main>
    <ak-plugin></ak-plugin>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域
</script>

<style type="text/css">
    /*样式覆盖区域*/
    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }
    @keyframes opacity {
        to {
            opacity: 1;
        }
    }
    @keyframes opacity-reverse {
        to {
            opacity: 0;
        }
    }
    .ak-phonebox article {
        width: 379px;
        height: 673px;
        display: none;
    }
    .ak-phonebox article img {
        width: 379px;
        height: 653px;
        opacity: 0;
        animation: opacity 1.2s ease 1.2s forwards;
    }
    .ak-phonebox article svg {
        position: absolute;
        top: 0;
        left: 0;
        animation: opacity-reverse 0.5s linear 1.2s forwards;
    }
    .ak-phonebox article svg .path {
        stroke-dasharray: 5000;
        stroke-dashoffset: 5000px;
        animation: dash 4s linear forwards;
    }
    .ak-phonebox article svg .circle {
        stroke-dasharray: 500;
        stroke-dashoffset: 500px;
        animation: dash 3s linear forwards;
    }
    .ak-phonebox article svg .earcircle {
        stroke-dasharray: 46;
        stroke-dashoffset: 46px;
        animation: dash 1.5s linear forwards;
    }
    .ak-phonebox article svg .earphone {
        opacity: .8;
        stroke-dasharray: 200;
        stroke-dashoffset: 200px;
        animation: dash 1.5s linear forwards;
    }
    .ak-phonebox article svg .else {
        opacity: .5;
        stroke-dasharray: 60;
        stroke-dashoffset: 60px;
        animation: dash 1s linear forwards;
    }
    .ak-phonebox article .heiyo {
        width: 75px;
        height: 38px;
        position: absolute;
        bottom: 59px;
        left: 152px;
        display: block;
        border-radius: 40px;
        outline: 0;
    }
    .ak-phonebox article .iframe-box {
        width: 345px;
        height: 520px;
        position: absolute;
        background-color: #FFF;
        top: 56px;
        left: 17px;
        opacity: 0;
        border-radius: 5px;
        animation: opacity 1s ease 1.5s forwards;
        z-index: 9999;
    }
    .ak-phonebox article .iframe-box iframe {
        border-radius: 5px;
    }
</style>

<!--
//注：template，ak-page-code，ak-title，ak-plugin，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-page-code></ak-page-code>
    <ak-title></ak-title>
    <div></div>
    <ak-plugin></ak-plugin>
</template>
<script>
</script>
<style>
</style>
-->
